<template>
    <div style="min-width:829px">
    <div v-if="$route.path == '/trademarkList'">
        <div class="vs-table-box">
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="品牌列表" name="first"></el-tab-pane>
                <el-tab-pane label="已申请品牌列表" name="second"></el-tab-pane>
            </el-tabs> -->

            <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column prop="id" width="100px" label="品牌ID" ></el-table-column>
                <el-table-column prop="brand" label="品牌名称"> </el-table-column>
                <!-- <el-table-column prop="desc" label="简介"> </el-table-column> -->
                <el-table-column prop="img" label="品牌图片" min-width="160">
                    <template slot-scope="scope">
                        <el-image class="image-thumbnail" :src="scope.row.img[0]" fit="cover" :preview-src-list="scope.row.img" >
                        </el-image>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="品牌状态" v-if="activeName == 'first'"> 
                    <template slot-scope="scope" >
                        <span>{{ scope.row.status === 0 ? '待审核': scope.row.status === 1 ? '通过' : scope.row.status === 2 ? '驳回' : '-' }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column prop="reason" label="拒绝原因" width="130" v-if="activeName == 'first'"> </el-table-column>
                <el-table-column fixed="right" width="180" label="操作"> 
                    <template slot-scope="scope">
                        <span @click="introduce(scope.row)" class="tab-table-text">查看品牌详情</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="sizes,prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div>
        </div>
    </div>
        <router-view></router-view>

     <el-dialog title="品牌详情" width="900px" :close-on-click-modal="false" :visible.sync="isIntroduce">
        <el-descriptions :column="1" border :label-style="{ width: '120px', fontWeight: 'bold' }">
            <el-descriptions-item label="品牌名称"> {{ruleForm.brand}} </el-descriptions-item>
            <el-descriptions-item label="品牌图片"> <img :src="ruleForm.img" class="ruleFormImg" alt="" srcset=""> </el-descriptions-item>
            <el-descriptions-item label="品牌详情"> 
                <div id="edit" ref="edit"></div>
            </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
            <el-button @click="isIntroduce=false;">确 定</el-button>
        </span>
    </el-dialog>

    </div>
</template>

<script>
import E from "wangeditor";
export default {
    data() {
        return {
            ruleForm: {},
            isIntroduce: false,
            recordList:[],
            loading:false,
            isBtn:false,
            isInfo:false,
            dialogVisible:false,
            activeName: 'first',
            paging:{
                status: '1',
                page:1,
                total:0,
                limit:10,
            },
            pagings:{
                page:1,
                total:0,
                limit:10,
            },
            form: {
                date: "",
            },
            classList:[],
            tableData: [],
            rowItem: {}
        };
    },
    created() {
        if(this.$route.path == '/trademarkList'){
            this.handleCurrentChange(1);
            // this.getGoodsCategory();
        }
    },
    methods: {
        introduce(row) {
            this.isIntroduce = true
            this.ruleForm = row
            this.$nextTick(() => {
                this.getEdit();
            });
        },
        // handleClick(tab, event) {
        //     console.log(tab, event);
        //     this.reset()
        // },
        async repairGetList(){
            this.loading = true;
            let {code,data} = await this.$Http.brandList(this.paging);
            this.loading = false;
            if(code){
                this.tableData = data.data.map(v=>{
                    v.img = v.img.split(",");
                    return v;
                });
                console.log(67, this.tableData)
                this.paging.total = data.total;
            }
        },
        reset(){//重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1);
        },
        handleSizeChange(val){
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val){
            this.paging.page = val;
            this.repairGetList()
        },

         // 富文本编辑
        getEdit() {
            this.editor = new E(this.$refs.edit);
            this.editor.config.uploadImgMaxSize = 50 * 1024 * 1024; // 设置最大上传大小，例如50MB
            this.editor.config.onchange = (html) => {
                this.ruleForm.content = html;
            };
            this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {

                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                console.log(77, res)
                if (res.code == 10000) {
                    this.$message({
                    message: "上传成功",
                    type: "success",
                    });
                    insertImgFn(res.data);
                } else {
                    // this.$message(res.msg);
                }
                });
            };
            this.editor.config.customUploadVideo = (resultFiles, insertVideoFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                console.log(77, res)
                if (res.code == 10000) {
                    this.$message({
                    message: "上传成功",
                    type: "success",
                    });
                    insertVideoFn(res.data);
                } else {
                    this.$message(res.msg);
                }
                });
            };
            this.editor.create();
            this.editor.disable();
            this.editor.txt.html(this.ruleForm.content);
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail{
    width: 130px;
    height: 130px;
}
.image-thumbnails{
    width: 30px;
    height: 30px;
}
.ruleFormImg{
    width: 100px;
    height: 100px;
}
</style>